<template>
  <view class="page">
    <uni-section
      title="起点内容"
      subTitle="使用 trim 属性 ,可以控制返回内容的空格 "
      type="line"
      padding
    >
      <uni-easyinput
        class="uni-mt-5"
        trim="all"
        v-model="start"
        placeholder="请输入起点内容"
      ></uni-easyinput>
    </uni-section>
    <uni-section
      title="终点内容"
      subTitle="使用 trim 属性 ,可以控制返回内容的空格 "
      type="line"
      padding
    >
      <uni-easyinput
        class="uni-mt-5"
        trim="all"
        v-model="end"
        placeholder="请输入终点内容"
      ></uni-easyinput>
    </uni-section>
  </view>

  <view class="uni-padding-wrap uni-common-mt">
    <view class="button-sp-area">
      <span>根据起点和终点任务查询：</span>
      <button class="mini-btn" type="primary" size="mini" @click="queryByStartAndEndContent">
        搜索
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useValveTaskFavorStore } from '@/stores/modules/taskQueryByStartAndEndContent'

const taskFavorStore = useValveTaskFavorStore()

const emit = defineEmits(['notifyParent'])

const start = ref<string>('')
const end = ref<string>('')
const queryByStartAndEndContent = async () => {
  const res = await taskFavorStore.getTaskFavorData(start.value, end.value)

  emit('notifyParent', res)
}

// 定义一个可以被父组件调用的方法
defineExpose({
  getDataAgain: queryByStartAndEndContent,
})
</script>

<style>
.button-sp-area {
  display: flex;
  align-items: center;
  /* 垂直居中对齐 */
  justify-content: space-evenly;
  margin: 20rpx 25rpx;
}

.uni-mt-5 {
  margin-top: 5px;
}
</style>
